<template>
  <div id="content">
    <div class="img">
      <el-button type="primary" @click="back" plain
        ><span>⇦</span> 返回</el-button
      >
      <el-image
        style="width: 400px; height: 400px"
        :src="goodsDetail.pic"
        fit="fill"
      />
      <div class="img_min">
        <ul>
          <li v-for="(item, index) in goodsDetail.pic_m" :key="index">
            <img :src="item" />
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <h2>{{ goodsDetail.name }}</h2>
      <div class="content">
        <div class="meta">
          <div>
            <span class="color">售价</span>
            <span class="prices">￥{{ goodsDetail.price }}</span>
            <span class="shic">市场价<span class="prices2">￥338</span></span>
          </div>

          <span class="yis">已售6264件</span>
        </div>
        <div class="detail">
          <span class="color">商品信息</span>
          <span class="neir">{{ goodsDetail.roughly }}</span>
        </div>
        <div class="address">
          <p></p>
          <span class="color">配送说明</span>
          <p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
          <span class="color">配送至</span>
          <p>郑州</p>
          <span class="color">说明</span>
          <p>深圳大鹏新区暂不配送</p>
        </div>
        <div class="cart-number">
          <span class="color">件数</span>
          <div>
            <el-button
              size="small"
              @click="goodsDetail.number--"
              :disabled="goodsDetail.number == 1"
              >-</el-button
            >
            <!-- <input type="text" v-model="goodsDetail.number" /> -->
            <el-input v-model="goodsDetail.number" class="input" />
            <el-button size="small" @click="goodsDetail.number++">+</el-button>
          </div>
        </div>
        <div class="btn">
          <button class="btncolor1" @click="joinShopping(goodsDetail)">
            加入购物车
          </button>
          <button class="btncolor2" @click="payMoney(goodsDetail)">
            立即购买
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 悬浮的购物车 -->
  <suspend-cart />
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { addCart, seachCart, patchCart } from "@/api/api.js";
import { ElMessageBox, ElMessage } from "element-plus";
import SuspendCart from "@/components/SuspendCart.vue";
import VueEvent from "@/js/mitt";
export default {
  components: { SuspendCart },
  name: "goodsDetail",
  setup() {
    console.log(VueEvent);
    // 创建路由实例
    const route = useRoute();
    const router = useRouter();
    const goodsDetail = reactive({
      name: "",
      pic: "",
      pic_m: [],
      roughly: "",
      price: "",
      number: 1,
      goodsId: "",
    });

    console.log(route.query.pic_m);
    goodsDetail.name = route.query.name;
    goodsDetail.pic = route.query.pic;
    goodsDetail.roughly = route.query.roughly;
    goodsDetail.price = route.query.price;
    goodsDetail.goodsId = route.query.goodsId;
    goodsDetail.pic_m = route.query.pic_m;
    // console.log(goodsDetail.value);
    // const num = ref(1);
    // 引入vuex
    const store = useStore();
    // 登录用户的id
    const userId = store.state.userInfo.info.id;
    // 加入购物车
    const joinShopping = async (e) => {
      console.log(e.number);
      e.userId = userId;
      await seachCart("get", userId, e.goodsId).then((res) => {
        if (res.data.length == 0) {
          addCart("post", e).then(() => {
            ElMessage({
              message: "已加入购物车",
              type: "success",
              duration: "400",
            });
            VueEvent.emit("show", true);
          });
        } else {
          ElMessageBox.confirm("购物车已有该商品!", {
            confirmButtonText: "确定加入",
            cancelButtonText: "放弃加入购物车",
          })
            .then(() => {
              let id = res.data[0].id;
              let count = e.number + res.data[0].number;
              let data = { number: count };
              patchCart("patch", id, data).then(() => {
                ElMessage({
                  message: "已加入购物车",
                  type: "success",
                  duration: "400",
                });
              });
            })
            .catch(() => {
              ElMessage({
                message: "已取消加入购物车",
                duration: "400",
              });
            });
        }
      });

      // let data = JSON.stringify(e);
      // data  =JSON.parse(data)
      // store.dispatch("addShopping", data);
    };
    const payMoney = (e) => {

     let aa =  JSON.parse(JSON.stringify(e));
     console.log(aa);
      let num = 1;
      let sumPrice = e.number * e.price;
      let list =[]
      list.push(aa)

      console.log(JSON.stringify(list));
      const data =JSON.stringify(list)
      console.log(data);
      router.push({
        name: "SettleAccounts",
        query: { num, sumPrice, data },
      });
    };
    const back = () => {
      console.log("返回");
      router.go(-1);
    };
    return { goodsDetail, joinShopping, back, payMoney };
  },
};
</script>

<style lang="scss" scoped>
#content {
  /* 	border: 1px solid red; */
  width: 70%;
  min-width: 1090px;
  height: 650px;
  background-color: #dcdcdc;
  border-radius: 10px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .right {
    width: 50%;
  }
}

#content .img {
  display: flex;
  flex-direction: column;
  width: 40%;
  button {
    width: 60px;
    margin-top: -20px;
    margin-bottom: 10px;
    span {
      font-size: 26px;
    }
  }
}

#content .img_min ul li {
  list-style: none;
  float: left;
  margin: 20px 15px;
}
.img_min ul li img {
  border: 3px white solid;
  width: 80px;
  height: 80px;
}
.img_min ul li img:hover {
  border: 3px #ff4f0d solid;
}

.content .color {
  color: #758188;
}
.content .meta {
  width: 100%;
  height: 100px;
  background-color: #fff2e8;
  color: #758188;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    display: flex;
    flex-direction: column;
  }
}
.content .meta .prices {
  color: #ff4f0d;
  font-size: 35px;
  font-weight: bold;
}
.content .meta .prices2 {
  text-decoration: line-through;
}
.detail {
  width: 100%;
  height: 100px;
  background-color: #fff2e8;
  margin-top: 10px;
}
.detail span,
p {
  margin-top: 10px;
}
.detail .neir {
  margin-left: 50px;
}
.address {
  margin-top: 10px;
}
.cart-number {
  margin-top: 10px;
  display: flex;
  width: 35%;
  justify-content: space-between;
}
.cart-number > div .input {
  width: 30px;
  height: 24px;
}

.cart-number > span:hover {
  cursor: pointer;
}
.btn {
  margin-top: 30px;
}
.btn button {
  display: inline-block;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  margin-left: 30px;
}
.btn .btncolor1 {
  background-color: #ffeee8;
  color: #ff4f0d;
  font-size: 20px;
  font-weight: bolder;
  border: 1px #ff4f0d solid;
}
.btn .btncolor2 {
  background-color: #ff4f0d;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  border: 1px #ff4f0d solid;
}
/* .all .iheader{
	margin: auto;
} */
</style>